<template>
  <div class="all">
    <div class="title">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button type="primary" icon="el-icon-document-checked" @click="submitForm('form')">保存</el-button>
      </div>
    </div>
    <div class="detail-mid">
      <el-form ref="form" :model="data" :rules="rules" inline>
        <el-row>
          <el-col :span="4">
            <el-form-item label="编码：" prop="coding">
              <el-input v-model="data.coding" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="名称：" prop="name">
              <el-input v-model="data.name" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="维护负责人：">
              <el-input v-model="data.admin_id" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态：" prop="status">
              <SelfSelect v-model="data.status" :showList="costStatus" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="上级成本：">
              <el-input v-model="data.parent_id" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="排序：" prop="sort">
              <el-input v-model="data.sort" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-bottom">
      <el-tabs v-model="activeName">
        <el-tab-pane label="描述" name="one">
          <div style="width: 100%;padding: 2px">
            <Tinymce v-model="data.content" :height="250" id="edit" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/system/cost'
import SelfSelect from '@/components/select-o'
import Tinymce from '@/components/Tinymce/index'
import { costStatus } from '@/utils/option'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update'],
  components: {
    SelfSelect,
    Tinymce
  },
  data() {
    return {
      data: {
        sort: 100,
        status: 1
      },
      editId: null,
      title: '',
      costStatus,
      activeName: 'one',
      rules: {
        coding: { required: true, message: '请输入编码', trigger: 'change' },
        name: { required: true, message: '请输入名称', trigger: 'change' },
        status: { required: true, message: '请输入状态', trigger: 'change' },
        sort: { required: true, message: '请输入排序', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '成本中心详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增成本中心'
    }
  },
  methods: {
    goBack() {
      this.$router.push('/system/cost')
    },
    info() {
      API.getOne(this.editId).then(res => {
        this.data = res.data
      })
    },
    submitForm() {
      if (this.editId) {
        this.update(API, this.data, this.$refs['form'], '/system/cost')
      } else {
        this.add(API, this.data, this.$refs['form'], '/system/cost/edit/')
      }
    }
  }
}
</script>

<style scoped>
.one{
  display: flex;
  justify-content: space-between;
}
.submit{
  display: flex;
  margin: 14px 0 8px;
  width: 100%;
}
.mr{
  margin-right: 2%;
}
.inputs{
  display: flex;
  justify-content: space-between;
  margin: 14px 0 8px;
}
</style>
